The idea is to move styles into HTML element scss files. The benefit I want to have is having to learn less PicoCSS SCSS "madness", but being able to write themes by allowing me to work with the well-known HTML elements' scss, rather than modules.
Using a postcss plugin, it should be possible to merge duplicate css rules back into the current pico.css format.

Once I modify src/Resources/picocss.yaml, I run php bin/console merge:specs. This gives me an updated HTML5 specification file (src/Resources/picocss-html5-specification.yaml).

Then I run vendor/bin/ext-html make:all --specification=src/Resources/picocss-html5-specification.yaml which updates all Html\Element\Classes and all Html\Enum\Classes.

Finally I run php bin/console make:sass which is creating new scss/inline|block folders and add more scss files.

Basically, the only things I want to actually really manually refactor here are content forms folders - these I want to replace with the new inline/block folders. void elements are intentionally left out due to not being visible.

I think the purpose of this branch needs further clarification.
In my previous attempts to generate a schema-first HTML5 Storybook I really wanted to set theme to false, in order to have each elements style closely tied to its story. But since Picocss styles needed for a anchor.stories.js are all over the place, import 'anchor.scss'; was not doable at least I wasn't able to automate or extract per-element styles.

So with this new structure in place, I am positive to get there soon.
This will also allow me to auto-generate Storybooks for Picocss for multiple loaders/languages. (Twig, Vue, React, etc.)

As an example, a story for links would sit in a anchor folder, and I'd be able to configure storybook vite, a sass and twig loader to look like this:

|— anchor
­­­|   |— anchor.stories.js
|   |— anchor.twig
|    — anchor.scss

This will make the process of creating new custom components much easier. Plus it will allow to do theming in a atoms/molecules/organisms fashion.

For reference:
https://github.com/vardumper/extended-htmldocument (is where I have the HTML5 specs, and render stories, twig files, etc.)
https://github.com/vardumper/picocss-storybook/tree/develop/stories/html (an example storybook with plain JS stories)

next steps for this branch:

• similar to $modules add an $elements configuration (could even be part of $modules) to allow disabling styles per element, if needed. add the necessary map lookups to scss files. add to documenation.
• add tokens to storybook such as colors, schemes, fonts in a way they can be generated from pico scss variables/source.
• add picocss to storybook, in a way it doesnt mess with controls
• add new per-html-element scss files to storybook js
• then add storybook that uses twig templates
• then add storybook that uses react templates

discuss if storybooks & templates part of this repo or not. possibility to move logic and code generation into build workflow and publish to separate repos or build assets.